<template>
	<view class="d-flex flex-column justify-start px-30 manual-sale">
		<view class="field-title">手环号</view>
		<view class="input-box">
			<u-input v-model="memberNumber" :border="false" placeholder="请输入智能卡号" style="border: 1px solid #eee; border-radius: 10rpx;" :style="{width: (isApp ? 484 : 614)+'rpx', marginRight: (isApp ? 15 : 0) + 'rpx'}"></u-input>
			<view v-if="isApp" class="read-btn" @click="startScan">读卡</view>
		</view>
		<view class="field-title">游戏得分</view>
		<view class="input-box" style="margin-bottom: 40rpx;">
			<u-input v-model="gameScore" type="number" :border="false" placeholder="请输入游戏得分" style="width: 614rpx;border: 1px solid #eee; border-radius: 10rpx;"></u-input>
		</view>
		<!-- <u-alert-tips type="error" title="提示" description="得分录入后无法撤回，但可以重复录入；请详细核对录入信息是否正确。"></u-alert-tips> -->
		<view class="alert-tip">提示: 得分录入后无法撤回，但可以重复录入；请详细核对录入信息是否正确。</view>
		<view class="d-flex justify-center" style="position: fixed;
			bottom: 300rpx; width: 630rpx;">
			<view class="sale-btn" @click="$u.throttle(submitForm, 1000)">立即录入</view>
		</view>
		
		
	</view>
</template>

<script>
	// #ifdef APP
	const uhfPlugin = uni.requireNativePlugin('Uhf-Plugin')
	import xRemote from "@/uni_modules/shinn-xRemote/js-sdk/index.js";
	// #endif
	import {
		entryScore
	} from "@/api/home.js"
	export default {
		data() {
			return {
				memberNumber: "",
				gameScore: '',
				ticketFlag: true,
				userInfo: {},
				scenicInfo: null,
				showResult: false,
				resultContent: '',
				deptId: '',
				isApp: true
			}
		},
		onShow() {
			this.memberNumber = ""
			this.gameScore = ""
			this.userInfo = this.$store.getters.getUserInfo;
			this.scenicInfo = uni.getStorageSync('scenicInfo') || null
			this.deptId = uni.getStorageSync('deptId') || ''
		},
		onLoad() {
			let that = this
			
			// #ifdef APP
			this.isApp = true
			// 连接读卡设备
			this.connectDevice()
			//添加监听
			xRemote.addListener();
			xRemote.getMonitor((code) => {
				console.log("当前点击的按键:" + code)
				if(code == 523) {
					uni.getClipboardData({
						success: (res) => {
							if(res.data) {
								that.$u.throttle(()=> {
									uni.setClipboardData({
										data: '',
										showToast: false
									})
									that.memberNumber = res.data;
								}, 2000)
							}
							
						},
						fail: (err) => {
							console.error('获取剪贴板内容失败:', err);
						},
						complete: () => {
							console.log('获取剪贴板内容操作结束');
						}
					});
				}
				
			})
			
			// #endif
		},
		onUnload() {
			// #ifdef APP
			xRemote.removeListener();
			// #endif
		},
		methods: {
			// #ifdef APP
			connectDevice() { // 连接设备
				uhfPlugin.connectDevice((res) => {
					console.log('结果', res)
				})
			},
			startScan() { // 开始读卡
				uhfPlugin.scan((res) => {
					this.memberNumber = res.epc;
				})
			},
			
			// #endif
			toNav(callback) {
				if (!this.userInfo) {
					uni.navigateTo({
						url: '/pages/my-sub/login/login'
					})
					return false
				}
				if (!this.deptId) {
					uni.navigateTo({
						url: '/pages/home-sub/choose-company/choose-company'
					})
					return false
				}
				if (!this.scenicInfo) {
					uni.navigateTo({
						url: '/pages/home-sub/choose-scenic/choose-scenic'
					})
					return false
				}
				callback()
			},
			submitForm() {
				if (this.memberNumber == "") {
					uni.showToast({
						title: '请输入智能卡号',
						duration: 2000,
						icon: "none"
					})
					return 
				}
				if (this.gameScore == "") {
					uni.showToast({
						title: '请输入游戏得分',
						duration: 2000,
						icon: "none"
					})
					return
				}
				const regex = /^(?:\d|[1-9]\d|100)$/;
				if(!regex.test(this.gameScore)) {
					uni.showToast({
						title: '游戏得分请输入0到100之间的整数',
						duration: 2000,
						icon: "none"
					})
					return
				}
				this.toNav(() => {
					entryScore({
						memberNumber: this.memberNumber,
						scenicSpotId: this.scenicInfo.scenicSpotId,
						gameScore: this.gameScore
					}).then(res => {
						uni.showToast({
							title: '录入成功'
						})
						setTimeout(() => {
							uni.hideLoading()
						}, 2000)
						
						this.memberNumber = ""
						this.gameScore = ""
					}).catch(err => {
						this.resultContent = err.msg
						this.showResult = true
						uni.hideLoading()
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background: #eee;
		height: 100%;
	}

	.manual-sale .u-input {
		background: #fff;
		border-radius: 10rpx !important;
		/* max-width: 690rpx; */
	}

	.manual-sale .u-input__input {
		height: 78rpx;
		padding: 0 30rpx;
	}
	.u-input__right-icon {
		padding-right: 16rpx;
	}
</style>

<style lang="scss" scpoed>
	.manual-sale {
		background-color: #fff;
		
		border-radius: 20rpx;
		
		position: fixed;
		top: 30rpx;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		padding-top: 40rpx;
		.field-title {
			font-size: 30rpx;
			font-weight: 600;
			margin-bottom: 16rpx;
			padding-left: 10rpx;
		}
		.input-box {
			width: 630rpx;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			image {
				width: 30rpx;
				height: 31rpx;
				position: absolute;
				left: 20rpx;
				top: 39%;
				z-index: 9;
			}
			.read-btn {
				width: 110rpx;
				height: 78rpx;
				background-color: #F4C233;
				color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;
				border-radius: 6rpx;
			}
		}

		.sale-btn {
			width: 440rpx;
			height: 100rpx;
			background: #F4C233;
			border-radius: 50rpx;
			font-size: 30rpx;
			text-align: center;
			color: #000;
			line-height: 100rpx;
			
		}
		.alert-tip {
			color: #CE4949;
			font-size: 26rpx;
		}
	}
</style>